<template>
  <el-container>
    <el-aside id="aside" style="flex: 0 0 auto; width: auto;">
      <nva></nva>
    </el-aside>
    <el-container>
      <el-header id="head1" style="text-align: center; font-size: 12px" height="50px">
        <hea></hea>
      </el-header>
      <el-main id="main" style="flex: 1;overflow-y: scroll; ">
        <div class="container"   style="overflow-y: scroll;">
          <el-scrollbar height="auto">
            <router-view></router-view>
          </el-scrollbar>
        </div>
      </el-main>
    </el-container>
  </el-container>



    <!-- <div class="container">
      <el-aside id="aside">
        <nva></nva>
      </el-aside>
      <div class="main-content">
        <el-header id="head1" style="text-align: center; font-size: 12px" height="50px">
          <hea></hea>
        </el-header>
        <el-main id="main">
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
      </div>
    </div> -->

</template>
<script>
import nva from "../components/nva";
// import hea from "../components/head";
import hea from "../components/head";
import router from "@/router";

export default {
  components: {
    nva,
    hea,
    router
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {}
}

</script>
<style>
#main {
  width: 100%;
  height: 100%;
  /* height: calc(100vh - 84px); */
  padding: 0;
}

#head {
  padding: 0;
}


#head1 {
  background-color: #3c8dbc;
}

#aside {
  width: auto !important;
  height: 100vh;

  box-shadow: 2px 0 6px rgba(255, 255, 255, 0.145);
}

.container {
  margin-left: 20px;
  margin-top: 10px;
}

/* .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
} */
</style>
